<template>
	<view>
		<!-- 服务地址 -->
		<view class="addres">
			<view class="lef">


				<view class="ffm">
					<text class="fwmc">服务名称：</text>
					<text class="mc">深度保洁</text>
				</view>
				<view class="addre">
					<text class="dz">地址：</text>
					<text class="mc"> xxx xxx xx xxx xxx xx</text>
				</view>
				<view class="gzdm">
					<text class="dz">服务代码：</text>
					<text class="mc"> 4532</text>
				</view>

			</view>
			<view class="rig">
				<!-- <u-button type="primary" text="一键投诉"></u-button> -->
			</view>

		</view>
		<!-- 服务进度 -->
		<view class="fwjd">
		<text>服务进度</text>

		</view>
		<view class="fwjd2" style=" display: flex; justify-content: center;">
			<u-steps current="1" direction="column" activeColor="#07c5b3">
				<u-steps-item title="服务人员准备中……" desc="10:30"></u-steps-item>
				<u-steps-item title="服务人员正在赶来" desc="10:35"></u-steps-item>
				<u-steps-item title="服务人员已到达" desc="11:40"></u-steps-item>
				<u-steps-item title="服务人员规划中" desc="11:40"></u-steps-item>
				<u-steps-item title="服务人员工作中" desc="11:40"></u-steps-item>
				<u-steps-item title="服务人员已完成" desc="11:40"></u-steps-item>
				<u-steps-item title="业主检查中" desc="11:40"></u-steps-item>
				<u-steps-item title="服务已完成" desc="11:40"></u-steps-item>

			</u-steps>
		</view>
		<!-- 服务人员介绍 
		<view class="fwry">
			<text>服务人员介绍:</text>
			<u-scroll-list >
				<view v-for="(item, index) in list" :key="index" class="items ">
					 
					<image src="/static/tp.png" mode=""></image>
					<text class="jx">简介:认真负责</text>
					<text>张飞</text>
				</view>
			</u-scroll-list>

		</view>-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						thumb: "https://xxx.com/goods/1.jpg",
					},
					{
						thumb: "https://xxx.com/goods/2.jpg",
					},
					{
						thumb: "https://xxx.com/goods/3.jpg",
					},
					{
						thumb: "https://xxx.com/goods/4.jpg",
					},
					
				],
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #dfeaea;
	}

	.addres {
		.lef {
			margin: 8px;
			background-color: #07c5b3;
			padding: 5px;
			border-radius: 8px;
			color: #ffffff;
			.ffm {
				margin: 4px;
				.fwmc {
					font-size: 17px;
					font-weight: 400;
				}

				.mc {}
			}

			.addre {
				margin: 4px;
				.dz {
					font-size: 17px;
					font-weight: 400;
				}

				.mc {}
			}

			.gzdm {
				margin: 4px;
				.dz {
					font-size: 17px;
					font-weight: 400;
				}

				.mc {}
			}
		}

		.rig {}

	}

	.fwjd {
		font-size: 19px;
		// margin-top: 18px;
		margin: 18px 8px;
	}

	.fwjd2 {}

	.fwry {
		font-size: 16px;

		// margin-top: 8px;

		text {
			margin: 8px;
		}

		.items {
			margin: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			image {
				width: 55px;
				height: 55px;
				border-radius: 7px;
			}

			.jx {
				font-size: 10px;
				color: #45d2bf;
				width: 50px;
				height: 25px;
			}

			text {
				font-size: 15px;
			}
		}
	}
</style>